<template>
  <view class="newaddress">
    <text class="newaddress-text">为了保证快递能及时送达,建议填写家庭地址或家长工作单位地址</text>
    <view class="newaddress-content">
      <view class="newaddress-content-head" v-for="(item,index) in lists" :key="index">
        <text>{{item.type}}</text><input class="newaddress-content-head-input" v-model="item.value" type="text">
      </view>
      <view class="newaddress-content-head">
        <text class="moren">设置默认地址</text><switch class="switch" checked></switch>
      </view> 
    </view>
    <button class="ensure" @click="sure">确认保存</button>
  </view>
</template>

<script>
export default {
  data(){
    return{
      lists:[
        {
          type:'收货人',
          value:''
        },
        {
          type:'手机号码',
          value:''
        },
        {
          type:'所在地区',
          value:''
        },
        {
          type:'详细地址',
          value:''
        }
      ]
    }
  },
  methods:{
    sure(){
      // console.log(this.lists);
      this.$store.state.lists = this.lists
    }
  }
}
</script>

<style scoped>
  .newaddress {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .newaddress-text {
    width: 90%;
    font-size: 15px;
    color: #bbb;
    display: flex;
    justify-content: space-between;
    justify-content: center;
    margin-left: 40rpx;
    margin-top: 30rpx;
  }
  .newaddress-content{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .newaddress-content-head {
    position: relative;
    width: 100%;
    display: flex;
    margin-left: 40rpx;
    align-items: center;
    color: #bbb;
  }
  .newaddress-content-head-input {
    width: 70%;
    height: 100rpx;
    margin-left:30rpx;
    font-size: 18px;
  }
  .moren {
    height: 100rpx;
    line-height: 100rpx;
  }
  .switch {
    height: 80rpx;
    display: flex;
    align-items: center;
    position: absolute;
    right:60rpx;
  }
  .ensure{
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: center;
    margin-top: 50rpx;
    background-color: #fe7200;
    color: #fff;
  }
</style>